<template>
  <div>
    <el-row>
      <el-col>
        <el-form
          :model="form"
          ref="form"
          :rules="rules"
          inline
          label-width="120px"
        >
          <el-form-item label="监管银行名称:" prop="bankName">
            <el-col :span="9">
              <el-input
                v-model="form.bankName"
                placeholder="请输入总行名称"
              ></el-input>
            </el-col>
            <el-col :span="1" :style="{ 'text-align': 'center' }">-</el-col>
            <el-col :span="9">
              <el-select v-model="form.branchBankName" placeholder="请选择分行">
                <el-option
                  v-for="item in branchBanks"
                  :key="item.id"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="4" :offset="1">
              <el-button type="primary" size="mini" @click="onSearchBank">
                查询
              </el-button>
            </el-col>
          </el-form-item>
          <el-form-item
            label="统一社会信用代码:"
            label-width="150px"
            prop="creditCode"
          >
            <el-input
              v-model="form.creditCode"
              placeholder=""
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="注册地址:" label-width="100px" prop="address">
            <el-input v-model="form.address" placeholder="" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态:" prop="status" label-width="80px">
            <el-select v-model="form.status" placeholder="请选择">
              <el-option label="正常" value="0"></el-option>
              <el-option label="暂停" value="1"></el-option>
              <el-option label="无效" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-form :model="form" :rules="rules" label-width="120px">
      <el-form-item label="理由:">
        <el-col :span="22">
          <el-input
            type="textarea"
            v-model="form.reason"
            placeholder="状态为暂停、无效时才填写"
          ></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="附件:">
        <el-button type="primary" size="mini">上传</el-button>
        <collapse-upload-tags :data="tags" @data-tags="createTags"></collapse-upload-tags>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.native="onSubmit('form')">
          保存
        </el-button>
        <el-button @click="resetForm('form')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import CollapseUploadTags from "./CollapseUploadTags.vue";
import { validateFileds } from "@/utils/validate";
import _ from "lodash";
export default {
  name: "CollapseBankInfo",
  components: {
    CollapseUploadTags,
  },
  data() {
    return {
      form: {
        bankName: "",
        branchBankName: "",
        creditCode: "xxxx",
        address: "山东省济南市",
        status: "",
        reason: "",
      },
      rules: {
        bankName: [
          { required: true, message: "请输入总行名称", trigger: "blur" },
        ],
        branchBankName: [{ required: true, message: "请选择分行名称" }],
        creditCode: [
          {
            required: true,
            message: "请维护统一社会信用代码",
            trigger: "blur",
          },
        ],
        address: [
          { required: true, message: "请维护注册地址", trigger: "blur" },
        ],
        status: [{ required: true, message: "请选择状态", trigger: "change" }],
      },
      branchBanks: [],
      tags: [],
    };
  },

  computed: {
    
  },
  created() {
    this.getBranchBank();
    this.getFiles();
  },

  methods: {
    onSearchBank() {
      this.getBranchBank(this.form.bankName);
    },

    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 校验 分行
          // 验证社会统一信用代码、注册地址
          const truthy = [
            {
              rule: this.rules.branchBankName,
              value: this.form.branchBankName,
            },
            { rule: this.rules.creditCode, value: this.form.creditCode },
            { rule: this.rules.address, value: this.form.address },
          ].every((item) =>
            validateFileds(this.$message, item.rule, item.value)
          );
          if (truthy) this.saveData();
        }
      });
    },

    resetForm(form) {
      this.form.reason = "";
      this.$refs[form].resetFields();
    },

    createTags(tags) {
      if (_.isArray(tags)) {
        this.tags = tags;
        return tags;
      }
    },

    getBranchBank(bankName) {
      let url = "http://localhost:3000/mock/bank/getBranchBank";
      if (bankName) {
        url = `${url}?name=${bankName}`;
      }
      this.$http.get(url).then(({ data }) => {
        this.branchBanks = data;
      });
    },

    getFiles() {
      this.$http
        .get("http://localhost:3000/mock/bank/getFile")
        .then(({ data }) => {
          this.tags = data;
        });
    },

    saveData() {
      const data = JSON.stringify(this.form);
      this.$http
        .post("http://localhost:3000/mock/bank/saveData", data)
        .then(({ data }) => {
          this.$message({
            type: data.status ? "success" : "error",
            message: data.status ? "操作成功！" : "操作失败！",
          });
        });
    },
  },
};
</script>
<style scoped>
</style>